import React from "react";
import { Button, Input, Form, Cascader } from 'antd';
import $ from 'jquery';
import intl from 'react-intl-universal';


const SearchBar = (props) => {
    const onFinish = (value) => {
        // console.log('query', value)
        $.ajax({
            url: '/home/user',
            type: 'post',
            data: value,
            traditional: true,
            dataType: 'json',
            success: function(result) {
                props.callback(result.data)
            },
            error: function(err) {

            }
        });
    };

    return (
        <Form layout={'inline'} onFinish={onFinish}>
            <Form.Item name={'roles'} className='cascaderOnSearch'>
                <Cascader options={props.choose} multiple maxTagCount="responsive" placeholder={intl.get('roles')} />
            </Form.Item>
            <Form.Item name={'username'} className='usernameOnSearch'>
                <Input placeholder={intl.get('username')} allowClear={true} />
            </Form.Item>
            <Form.Item name={'name'} className='nameOnSearch'>
                <Input placeholder={intl.get('name')} allowClear={true} />
            </Form.Item>
            <Form.Item style={{width: '50px'}} className='submitOnSearch'>
                <Button type="primary" htmlType="submit">{intl.get('search')}</Button>
            </Form.Item>
        </Form>
    );
};

export default SearchBar;